import {useMemo} from "react";
import {CheckList, List, SearchBar} from "antd-mobile";
import EmptyList from "@/components/EmptyList";

const CheckListWithSearch = ({data, searchText, onCheck, onSearch}) => {
    const filteredItems = useMemo(() => {
        if (searchText) {
            return data.filter(item => {
                console.log(item)
                console.log(searchText + "**")
                return item.name.includes(searchText) || item.code.includes(searchText);
            });
        } else {
            return data;
        }
    }, [data, searchText])

    const SearchList = () => {
        return (
            <CheckList onChange={(value) => {
                onCheck(value)
            }}>
                {
                    filteredItems.map(item => {
                        return (
                            <CheckList.Item key={item.id + item.code} value={item}>
                                <List.Item description={item.code}
                                           style={{"--border-bottom": 0, "--border-inner": 0, "--border-top": 0}}>
                                    {item.name}
                                </List.Item>
                            </CheckList.Item>
                        );

                    })
                }
            </CheckList>
        );
    }

    return (
        <div>
            <SearchBar placeholder='请输入内容'
                       onChange={v => {
                           onSearch(v)
                       }}
                       showCancelButton/>

            {
                data.length > 0 ?
                    (<SearchList/>)
                    :
                    (<EmptyList/>)
            }
        </div>
    );
};

export default CheckListWithSearch;
